<template>
  <div class="text_love">
    <div class="love" v-for="(item,index) in textList" :key="index" >
      <div class="love_horizontal" :style="{animationDelay: '-' + delay*(index+1) + 'ms'}">
        <div class="love_vertical" :style="{animationDelay: '-' + delay*(index+1) + 'ms'}">
          <div class="love_word">{{item}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "text_love",  // 爱心 旋转
    data() {
      return {
        delay: 300,  // 通过改变delay 改变每个文字间距离
        textList: [
          '?',
          'Amour',
          'Liebe',
          'Amore',
          'Amor',
          'Любовь',
          '????',
          '?????',
          'Cinta',
          'Αγ?πη',
          '??',
          'Liefde',
          'Dashuri',
          'Каханне',
          'Любов',
          'Ljubav',
          'Láska',
          'Armastus',
          'Mahal',
          '????',
          'Szerelem',
          'Grá',
          '爱',
          'Mīlestība',
          'Meil?',
          'Cinta',
          '???',
          'Dragoste',
          'Láska',
          'Renmen',
          '???',
          'muna?a',
          'Sevgi',
          '?убав',
          'karout',
          'amà',
          'am?r',
          'k?rleiki',
          'mborayhu',
          'Upendo',
          'sòòyayyàà',
          'ljubav',
          '???',
          'с?ю',
          '?????????? ?? ?????',
          'с?й??',
          'tia',
          'aroha',
          'KHAIR',
          '?????',
          'kj?rlighet',
          'munay',
          'jecel',
          'K?rlek',
          'soymek',
          'Mahal',
          'ярату',
          '????',
          'sopp',
          'uthando',
          '???????',
          'A?k',
          'Tình yêu',
          '????',
          'Love'
        ]
      }
    },
    created() {

    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  .text_love {
    background: #000;
    width: 100%;
    height: 700px;
    overflow: hidden;
    .love{
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -160px 0 0 -160px;
      .love_horizontal {
        animation: horizontal 10000ms infinite alternate ease-in-out;
        .love_vertical{
          animation: vertical 20000ms infinite linear;
          .love_word {
            color: #fff;
            font-size: 1.4rem;
            transform: translateY(-100%) rotateZ(-30deg);
            font-family: 'Dosis', sans-serif;
            text-shadow: 0 0 10px #ffc800;
            letter-spacing: 2px;
            cursor: pointer;
          }
        }
      }
    }
    .love:last-child{
      .love_word {
        color: red !important;
        font-size: 3.5rem !important;
        text-shadow: 0 0 10px red !important;
      }
    }
  }
  @keyframes horizontal {
    from {
      transform: translateX(0px);
    }
    to {
      transform: translateX(450px);
    }
  }
  @keyframes vertical {
    0% {
      transform: translateY(180px);
    }
    10% {
      transform: translateY(45px);
    }
    15% {
      transform: translateY(4.5px);
    }
    18% {
      transform: translateY(0px);
    }
    20% {
      transform: translateY(4.5px);
    }
    22% {
      transform: translateY(34.61538px);
    }
    24% {
      transform: translateY(64.28571px);
    }
    25% {
      transform: translateY(112.5px);
    }
    26% {
      transform: translateY(64.28571px);
    }
    28% {
      transform: translateY(34.61538px);
    }
    30% {
      transform: translateY(4.5px);
    }
    32% {
      transform: translateY(0px);
    }
    35% {
      transform: translateY(4.5px);
    }
    40% {
      transform: translateY(45px);
    }
    50% {
      transform: translateY(180px);
    }
    71% {
      transform: translateY(428.57143px);
    }
    72.5% {
      transform: translateY(441.17647px);
    }
    75% {
      transform: translateY(450px);
    }
    77.5% {
      transform: translateY(441.17647px);
    }
    79% {
      transform: translateY(428.57143px);
    }
    100% {
      transform: translateY(180px);
    }
  }
</style>
